<template>
  <div class="xk-form">
    <div class="header">
      <slot name="header"></slot>
    </div>
    <el-form :label-width="labelWidth" :model="formData">
      <el-row>
        <div v-for="item in formItem" :key="item.label">
          <el-col v-bind="colLayout">
            <el-form-item :label="item.label" :style="itemStyle"
              ><template v-if="item.type == 'input' || item.type == 'password'">
                <el-input
                  v-model="formData[`${item.field}`]"
                  style="width: 100%"
                  :placeholder="item.placeholder"
                  :show-password="item.type == 'password'"
                  v-bind="item.otherOptions"
                ></el-input
              ></template>
              <template v-else-if="item.type == 'select'">
                <div
                  :class="{
                    'union-class-left': item.unionLeft == true,
                    'union-class-right': item.unionRight == true,
                  }"
                >
                  <el-select
                    style="width: 100%"
                    v-model="formData[`${item.field}`]"
                    v-bind="item.otherOption"
                    :placeholder="item.placeholder"
                    ><el-option
                      v-for="op in item.options"
                      :key="op.value"
                      :value="op.value"
                      :label="op.label"
                    >
                    </el-option
                  ></el-select>
                </div>
              </template>
              <template v-else-if="item.type == 'datepicker'">
                <el-date-picker
                  v-model="formData[`${item.field}`]"
                  v-bind="item.otherOptions"
                  style="width: 100%"
                >
                </el-date-picker>
              </template>
            </el-form-item>
          </el-col>
        </div>
      </el-row>
    </el-form>
    <div class="footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  props: {
    formItem: {
      type: Array,
      default: () => [],
    },
    labelWidth: {
      type: String,
      default: "100px",
    },
    itemStyle: {
      type: Object,
      default: () => {
        return { padding: "10px 40px" };
      },
    },
    colLayout: {
      type: Object,
      default: () => {
        return { xl: 6, lg: 8, md: 12, sm: 24, xs: 24 };
      },
    },
    value: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      formData: { ...this.value },
    };
  },
  watch: {
    formData: {
      handler(newValue) {
        console.log(">>>>");
        this.$emit("input", newValue);
      },
      // immediate: true,
      deep: true,
    },
  },
};
</script>
<style scoped>
.union-class-left {
  position: absolute;
  left: -173px !important ;
}
.union-class-right {
  position: absolute;
  right: -395px !important;
  top: -40px !important;
}
/deep/.union-class-left .el-select {
  width: 55px !important;
  height: 32px !important;
  padding: 0;
}
/deep/.union-class-left .el-select .el-input--suffix {
  right: 0px !important;
}
/deep/.union-class-left .el-select .el-input__inner {
  width: 60px !important;
  padding: 0 5px !important;
}
/deep/.union-class-right .el-select {
  width: 60px !important;
  height: 32px !important;
  padding: 0;
}
/deep/.union-class-right .el-select .el-input--suffix {
  right: 0px !important;
}
/deep/.union-class-right .el-select .el-input__inner {
  width: 60px !important;
  padding: 0 5px !important;
}
</style>
